<template>
  <div class="app-main-container">
    <div class="app-main-title">
      新增通用消费
      <div class="goback" @click="goBack">
        <i class="el-icon-refresh-left" /> 返回上一页
      </div>
    </div>
    <div>
      <el-form
        ref="form"
        class="doumee-form"
        :model="param"
        label-width="140px"
        label-suffix="："
        :rules="rules"
      >
        <el-form-item label="消费会员" prop="memberId">
          <MemberSearch
            ref="memberSearchRefa"
            style="width: 600px;"
            @clear="MemberClear"
            @select="MemberSelect"
          />
        </el-form-item>
        <el-form-item label="消费金额" prop="amot">
          <el-input
            v-model="param.amot"
            class="w600"
            oninput="value=value.replace(/[^0-9]{0,1}(\d*(?:\.\d{0,2})?).*$/g, '$1');"
            placeholder="请输入消费金额(最多两位小数)"
          />
        </el-form-item>
        <el-form-item label="消费类型" class="select-style" prop="type">
          <el-select v-model="param.type" placeholder="选择消费类型" class="w600">
            <el-option
              v-for="item in configList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="消费产品类型" class="select-style" prop="productType">
          <el-select v-model="param.productType" placeholder="选择消费产品类型" class="w600" @change="getCplist">
            <el-option label="套餐" value="04" />
            <el-option label="课程" value="07" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="param.productType == '04'" label="消费产品" class="select-style" prop="product">
          <el-select v-model="param.product" placeholder="选择消费产品" class="w600" filterable>
            <el-option
              v-for="item in cpList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="param.productType == '07'" label="消费产品" class="select-style" prop="product">
          <el-select v-model="param.product" placeholder="选择消费产品" class="w600" filterable>
            <el-option
              v-for="item in cpList"
              :key="item.courseId"
              :label="item.courseName"
              :value="item.courseId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="param.info" placeholder="请输入备注" class="w600" />
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="onSubmit()">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <orderDialog ref="child" @orderSuccess="getList" />
  </div>
</template>

<script>
import { configList, addConsumeGeneral, mealList, courseListPost } from '@/api'
import orderDialog from '@/components/order'
import MemberSearch from '@/components/MemberSearch'
export default {
  name: 'FinanceDefaultSpendAdd',
  components: {
    orderDialog,
    MemberSearch
  },
  data() {
    const validateMoney = (rule, value, callback) => {
      if (!value) {
        callback(new Error('金额不能为空'))
      } else if (value.indexOf('.') !== -1 && value.split('.').length > 2) {
        callback(new Error('请输入正确格式的金额')) // 防止输入多个小数点
      } else if (value.indexOf('.') !== -1 && value.split('.')[1].length > 2) {
        callback(new Error('请输入正确的小数位数')) // 小数点后两位
      } else {
        callback()
      }
    }
    return {
      subLoading: false,
      configList: [],
      cpList: [],
      param: {
        amot: '',
        type: '',
        info: ''
      },
      payMoney: '',
      changeMoney: 0.00,
      showMessage: false,
      cardMessage: {},
      cardPwd: '',
      dialogTableVisible: false,
      remark: '',
      hasLastPrice: false,
      lastPrice: {},
      verificatInfo: {},
      selectProId: '',
      rules: {
        amot: [
          { required: true, message: '请输入消费金额', trigger: 'blur' },
          { required: true, validator: validateMoney, trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择消费类型', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCofigList()
  },
  methods: {
    MemberSelect(item) {
      const that = this
      const fn = () => {
        that.verificatInfo = item
        that.$set(this.param, 'memberId', item.id)
      }
      fn()
    },
    MemberClear() {
      this.verificatInfo = {}
      this.$set(this.param, 'memberId', '')
    },
    getCofigList() {
      configList({ param: { type: '72' }}).then(res => {
        this.configList = res.recordList
      }).catch(err => {
        console.log(err)
      })
    },
    getCplist() {
      this.$set(this.param, 'product', '')
      if (this.param.productType === '04') {
        mealList({ param: { venueId: sessionStorage.getItem('venueId') }}).then(res => {
          this.cpList = res.recordList || []
        }).catch(err => {
          console.log(err)
        })
      } else {
        courseListPost({
          param: {
            flag: '2',
            channel: '02',
            venueIds: [sessionStorage.getItem('venueId')]
          }
        }).then(res => {
          this.cpList = res.recordList || []
        })
      }
    },
    onSubmit() {
      const param = { ...this.param }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.subLoading = true
          addConsumeGeneral({
            param: param
          })
            .then((res) => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                // this.dialogTableVisible = true
                this.orderMessgae = res.record
                this.$refs.child.continuePay(res.record, 'financeDefaultSpend')
              }
            })
            .catch(() => {
              this.subLoading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getList() {
      this.$router.replace(`/finance/financeDefaultSpend?renovate=1`)
    },
    cancelOrder() {
      // 取消支付
      this.dialogTableVisible = false
      this.orderMessgae = {}
      this.lastPrice = {}
      this.hasLastPrice = false
      this.selectedMessage = []
      this.closeMessage()
    },
    // 返回上一页
    goBack() {
      this.$router.replace(`/finance/financeDefaultSpend`)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
